<template>
  <div
    @mouseenter="iconVisible = true"
    @mouseleave="iconVisible = false"
    class="list-item-wrapper"
    :style="{ border: props.isActive ? '1px solid #377dff' : '' }">
    <div class="item-title">
      <div>{{ props.prompInfo.name }}</div>
      <div
        class="btn"
        v-show="iconVisible && !props.isActive"
        @click.stop="deleteHistoryChat">
        <el-icon class="custom-icon"><DeleteFilled /></el-icon>
      </div>
    </div>

    <div class="item-info">
      <div class="chat-num">{{ props.chatNum }}条结果</div>
      <div class="chat-time">{{ props.prompInfo.gmtCreated }}</div>
    </div>
  </div>
</template>

<script setup>
  import { getCurrentInstance, ref, onMounted } from 'vue'
  import { DeleteFilled } from '@element-plus/icons-vue'
  import tipMessage from '@/utils/tipMessage'
  import { ElMessageBox } from 'element-plus'
  import useAiChat from '@/store/aiChat'

  const aiChatStore = useAiChat()
  const emit = defineEmits(['refreshChatList'])
  const { proxy } = getCurrentInstance()
  const props = defineProps({
    prompInfo: {
      type: Object,
      default: {}
    },
    isActive: {
      type: Boolean,
      default: false
    },
    chatNum: {
      type: [String, Number],
      default: 0
    }
  })
  const iconVisible = ref(false)
  /* ========方法======= */
  const deleteHistoryChat = () => {
    ElMessageBox.confirm('删除后无法恢复，是否继续删除？', '', {
      confirmButtonText: '删除',
      cancelButtonText: '取消',
      type: 'warning'
    })
      .then(async () => {
        try {
          await proxy.$http.getWithUrl('dialog/delete', {
            promptId: props.prompInfo?.promptId,
            conversationId: props.prompInfo?.conversationId
          })
          tipMessage('删除成功', 'success')
          // aiChatStore.initAiChatState()
          emit('refreshChatList')
        } catch (error) {
          console.log(error)
          tipMessage('删除失败', 'warning')
        }
      })
      .catch(() => {})
  }
  onMounted(() => {})
</script>

<style scoped lang="scss">
  .list-item-wrapper {
    cursor: pointer;
    box-sizing: border-box;
    height: pxTvh(82);
    padding: pxTvh(16);
    margin-bottom: pxTvh(16);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #fff;
    background-color: #19284d;
    border-radius: pxTvw(8);
    border: 1px solid transparent;
    & > .item-title {
      position: relative;
      & > div:first-child {
        width: 80%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      & > .btn {
        position: absolute;
        right: pxTvw(0);
        top: pxTvh(4);
        .custom-icon:hover {
          color: #f56c6c; /* 鼠标悬停时的颜色 */
        }
      }
    }
    & > .item-info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #cfdbfc;
      @include computed_font(12);
    }
  }
  .list-item-wrapper:hover {
    background-color: #3a5592;
  }
</style>
